// 员工姓名模糊查询
import React from 'react';
import { SearchOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Select, Spin, Input, Row, Col } from 'antd';
import { connect } from 'dva';

const {Option} = Select;
const FormItem = Form.Item;
@connect(({ publicdata: { empNameList }, loading }) => ({
  empNameList,
  loading: loading.effects['publicdata/fetchEmpNameList'],
}))
@Form.create({
  mapPropsToFields(props) {
    const { empNameList } = props;
    if (empNameList.length) {
      // 选择证件号时的props值
      props.empData(empNameList, false);
      return {
        empName: Form.createFormField({ value: empNameList[0].empName }),
        certNo: Form.createFormField({ value: empNameList[0].certNo }),
      };
    }
  },
})
class EmpSearch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      empNameList: [],
    };
  }

  // 获取名字
  search = value => {
    if (value.trim().length) {
      const values = {
        empName: value.trim(),
      };
      this.props.dispatch({
        type: 'publicdata/fetchEmpNameList',
        payload: values,
      });
    }
  };

  // 选择其中一个
  empData = value => {
    const { empNameList } = this.props;
    // console.log("value", value, empNameList)
    if (empNameList) {
      empNameList.map((item, i) => {
        if (item.sendId == value) {
          this.props.empData([item], false);
          this.setState({ certNo: item.certNo });
          this.props.dispatch({
            type: 'publicdata/fetchEmpName',
            payload: [item],
          });
        }
      });
    }
  };

  valiFunc = (rule, value, callback) => {
    this.setState({
      certNo: value,
    });
  };

  idVailFunc = () => {
    // const { empNameList } = this.props;
    const { certNo } = this.state;
    const patt = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    //  console.log('certNo', certNo, empNameList);
    if (patt.test(certNo)) {
      this.setState({
        valiStatus: 'success',
        tip: null,
      });
      if (certNo.trim().length) {
        const values = {
          certNo: certNo.trim(),
        };
        this.props.dispatch({
          type: 'publicdata/fetchEmpNameList',
          payload: values,
        });
      }
    } else {
      this.setState({
        valiStatus: 'error',
        tip: '请输入正确格式的身份证号',
      });
    }
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { loading } = this.props;
    const { empNameList } = this.props;
    // this.setState({
    //   empNameList: empNameList,
    // });
    const formItemLayout = {
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 8,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 16,
        },
      },
    };

    return (
      // <Spin spinning={loading} size="large">
      // </Spin>
      <Row>
        <Row>
          <Col span={14} offset={1}>
            <FormItem {...formItemLayout} label={<span>员工姓名 </span>}>
              {getFieldDecorator('empName', {
                rules: [
                  {
                    required: true,
                    message: '只能输入汉字或者英文',
                    pattern: /^[\u0391-\uFFE5A-Za-z]+$/,
                  },
                ],
              })(
                <Select
                  placeholder="请输入关键字检索"
                  {...this.props}
                  style={{ width: '100%' }}
                  showSearch
                  optionFilterProp="children"
                  showArrow={false}
                  onSearch={this.search}
                  onSelect={this.empData}
                  notFoundContent={loading ? <Spin size="small" /> : '暂无数据'}
                >
                  {empNameList.length &&
                    empNameList.map(item => <Option key={item.sendId}>{item.empName}</Option>)}
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={14} offset={1}>
            <FormItem
              {...formItemLayout}
              label="证件号:"
              hasFeedback
              validateStatus={this.state.valiStatus}
              help={this.state.tip}
            >
              {getFieldDecorator('certNo', {
                rules: [
                  {
                    required: true,
                    message: '请输入证件号',
                    validator: this.valiFunc,
                  },
                ],
              })(<Input placeholder="请输入证件号" />)}
            </FormItem>
          </Col>
          <Col span={4} style={{ marginLeft: 10 }}>
            <FormItem {...formItemLayout}>
              <span onClick={this.idVailFunc}>
                <SearchOutlined style={{ fontSize: '16px' }} />
              </span>
            </FormItem>
          </Col>
        </Row>
      </Row>
    );
  }
}
export default EmpSearch;
